import React, { Component } from 'react';
import { Modal, TouchableOpacity, Image, Text, View, StyleSheet, ScrollView, DeviceInfo } from 'react-native';
import NavigationUtil from '../navigator/NavigationUtil';
import DynamicTabNavigator from '../navigator/DynamicTabNavigator';
import { connect } from 'react-redux';
import CustomTheme from '../page/CustomTheme';
import actions from '../action';
import SafeAreaViewPlus from '../common/SafeAreaViewPlus';

class HomePage extends Component {

    renderCustomThemeView() {
        const { customThemeViewVisible, onShowCustomThemeView } = this.props;
        return (<CustomTheme
            visible={customThemeViewVisible}
            {...this.props}
            onClose={() => onShowCustomThemeView(false)}
        />);
    }

    render() {
        const { theme } = this.props;
        // 保证全局的navigation属性是一致的，这样才可以跳转
        NavigationUtil.navigation = this.props.navigation;
        // 返回动态底部导航器
        return <SafeAreaViewPlus
            topColor={theme.themeColor}
        >
            <DynamicTabNavigator />
            {this.renderCustomThemeView()}
        </SafeAreaViewPlus>
    }
}

const mapStateToProps = state => ({
    nav: state.nav,
    customThemeViewVisible: state.theme.customThemeViewVisible,
    theme: state.theme.theme,
});

const mapDispatchToProps = dispatch => ({
    onShowCustomThemeView: (show) => dispatch(actions.onShowCustomThemeView(show)),
});

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);
